<template>
  <div ref="ele" class="time-line-single">

  </div>
</template>

<script>
/* eslint-disable */

import echarts from "echarts";
import Debug from "debug";
let dbg = Debug("SingleViewTimeLine.vue");
dbg.enabled = true;

let the_chart = null;

export default {
  name: "SingleViewTimeLine",
  data: function() {
    return {
      null_chart: echarts.init(document.createElement("null"))
    };
  },
  props: {
    lineconfig: {
      type: Object
    }
  },
  computed: {
    chart() {
      return the_chart ? the_chart : this.null_chart;
    },
    starterId() {
      return this.$store.state.starterId;
    },
    font_size() {
      return 12;
    },
    opt_serieses() {
      return [];
    },
    opt_legend() {
      return {
        show: true,
        data: this.opt_serieses.map(e => {
          return {
            name: e["name"],
            icon: "roundRect"
          };
        }),
        orient: "vertical",
        right: 60,
        bottom: 40,
        type: "scroll",
        itemHeight: this.font_size,
        textStyle: {
          fontSize: this.font_size
        }
      };
    },
    opt_grids() {
      return [
        {
          left: "8%",
          right: "18%",
          top: 40,
          bottom: 60,
          // containLabel: true,
          show: false
        }
      ];
    },
    opt_yAxis() {
      return [
        {
          name: "Voltage /V",
          type: "value",
          min: 0,
          max: 30,
          offset: 75,
          position: "right",
          axisLine: {
            lineStyle: {
              color: this.lineconfig.colors["u30"]
            }
          },
          splitLine: {
            show: false
          }
        },
        {
          name: "Speed /RPM",
          type: "value",
          min: 0,
          max: 1500,
          position: "left",
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: this.lineconfig.colors["speed"]
            }
          },
          splitArea: {
            show: false
          }
        },
        {
          name: "Current /A",
          type: "value",
          min: 0,
          max: 1500,
          position: "right",
          offset: 0,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: this.lineconfig.colors["i30"]
            }
          }
        },
        {
          name: "POWER /W",
          type: "value",
          min: 0,
          max: 8000,
          position: "left",
          offset: 75,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: this.lineconfig.colors["water"]
            }
          }
        }
      ];
    },
    opt_xAxis() {
      return {
        type: "category",
        data: _.range(0, 3001),
        axisTick: {
          interval: 499,
          alignWithLabel: true,
          lineStyle: {
            color: "#333"
          }
        },
        name: "",
        nameGap: 23,
        nameLocation: "center",
        axisLabel: {
          interval: 499
        },
        offset: 5,
        axisLine: {
          onZero: false,
          lineStyle: {
            // color:"transparent"
          }
        }
      };
    },
    opt_echarts() {
      return {
        backgroundColor: "#FFf",
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left"
          },
          axisPointer: {
            type: "cross"
          },
          formatter: params => {
            let res = "&nbsp;&nbsp;&nbsp;time : " + params[0].data[0] + "ms";
            // debugger
            params.forEach(v => {
              res += "<br>" + v.marker + v.seriesName + " : " + v.data[1];
            });
            return res;
          }
        },
        grid: this.opt_grids,
        legend: this.opt_legend,
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: [0]
            // startValue: 0,
            // endValue: 2000
          }
        ],
        yAxis: this.opt_yAxis,
        xAxis: this.opt_xAxis,
        series: this.opt_serieses
      };
    }
  },
  mounted() {
    // dbg("mounted");
    // debugger;
    the_chart = echarts.init(this.$refs["ele"]);
    this.chart.setOption(this.opt_echarts);
  },
  watch: {
    opt_echarts: function(val) {
      // debugger
      this.chart.clear();
      this.chart.setOption(val);
    },
    starterId() {
       try {
        this.chart.clear();
        this.chart.setOption(this.opt_echarts);
      } catch (e) {}
    }
  },
  methods: {
    /**
     * @api public
     * @param {Array<{gridIndex:Number,test_id:Number}>} raw_xAxis
     * @param {Array<{gridIndex:Number,test_id:Number,comment:String}>} raw_yAxises
     * @param {Array<{name:String,test_id:Number,xAxisIndex:Number}>} raw_series
     */
    setOpts: function(raw_xAxis, raw_yAxises, raw_series, func = () => {}) {
      setTimeout($ => {
        func(raw_xAxis, raw_yAxises, raw_series, this);
      }, 1);
    }
  }
};
</script>

<style lang="scss">
.time-line-single {
  width: 1526px;
  height: 712px;
  background-color: white;
}
</style>
